import React, { PureComponent } from 'react';
import { Icon } from 'antd';
import Link from 'umi/link';
import Debounce from 'lodash-decorators/debounce';
import styles from './index.less';
import RightContent from './RightContent';
import project from './../../images/logo.png'
export default class GlobalHeader extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      background:localStorage.getItem('background')?localStorage.getItem('background'):'#000000'
    };
  }
  changeColor = (value) => {
    console.log('value',value)
    this.setState({
      background : value.hex
    },function() {
      localStorage.setItem('background',value.hex)
    })
  }
  resetBackground=()=>{
    this.setState({
      background:''
    },function() {
      localStorage.setItem('background','')
    })
  }
  componentWillUnmount() {
    this.triggerResizeEvent.cancel();
  }
  /* eslint-disable*/
  @Debounce(600)
  triggerResizeEvent() {
    // eslint-disable-line
    const event = document.createEvent('HTMLEvents');
    event.initEvent('resize', true, false);
    window.dispatchEvent(event);
  }
  toggle = () => {
    const { collapsed, onCollapse } = this.props;
    onCollapse(!collapsed);
    this.triggerResizeEvent();
  };
  render() {
    const { collapsed, isMobile, logo } = this.props;
    return (
      <div className={styles.header}  style={{background:this.state.background?this.state.background:''}}>
        <span className={styles.title} style={{fontSize:'24px',letterSpacing:'2px'}}>
          <img src={project} style={{width:'40px',height:'40px',marginRight:'10px',position:'relative',top:'-2px'}} alt=""/>珠华水工业集中器管理平台</span>
        <RightContent {...this.props} changeColor={this.changeColor} resetBackground={this.resetBackground} background={this.state.background}/>
      </div>
    );
  }
}
